<template>
  <div class="a8">
    <div class="a9"></div>
    <div class="a7"></div>
<!--  <div>-->
<!--&lt;!&ndash;    <div id="myChart" :style="{width: '500px', height: '350px'}" class="a4"></div>&ndash;&gt;-->
<!--    <div :style="{width: '500px', height: '350px'}" class="a4">-->

<!--      <div class="demo-image">-->
<!--          <el-image-->
<!--            style="width: 100px; height: 100px"-->
<!--            :src="url"-->
<!--            :fit="fit">-->
<!--          </el-image>-->
<!--      </div>-->

<!--    </div>-->

<!--  </div>-->

    <div class="a6">

    </div>


    <div class="a5">
<!--      <el-table-->
<!--        :data="tableData"-->
<!--        height="550"-->
<!--        border-->
<!--        style="width: 100%">-->

<!--        <el-table-column-->
<!--          prop="musicName"-->
<!--          label="歌曲"-->
<!--          align="center">-->
<!--        </el-table-column>-->
<!--        -->
<!--        <el-table-column-->
<!--          prop="visitQuantity"-->
<!--          label="点击量"-->
<!--          align="center">-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          align="center"-->
<!--          label="操作">-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              icon="el-icon-video-play"-->
<!--              circle-->
<!--              @click="handleMusic(scope.$index, scope.row)"></el-button>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="歌曲"
          prop="value.musicName"
          align="center">
        </el-table-column>

        <el-table-column
          label="播放量"
          prop="score"
          align="center">
        </el-table-column>

        <el-table-column
          align="center"
          label="操作">

          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-video-play"
              circle
              @click="handleMusic(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="a11"></div>


    <div class="a5">
      <el-table
        :data="tableData1"
        style="width: 100%">
        <el-table-column
          label="歌曲"
          prop="value.musicName"
          align="center">
        </el-table-column>

        <el-table-column
          label="收藏量"
          prop="score"
          align="center">
        </el-table-column>

        <el-table-column
          align="center"
          label="操作">

          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-video-play"
              circle
              @click="handleMusic(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="a11"></div>

    <div class="a5">
      <el-table
        :data="tableData2"
        style="width: 100%">
        <el-table-column
          label="歌曲"
          prop="value.musicName"
          align="center">
        </el-table-column>

        <el-table-column
          label="下载量"
          prop="score"
          align="center">
        </el-table-column>

        <el-table-column
          align="center"
          label="操作">

          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-video-play"
              circle
              @click="handleMusic(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="a6"></div>

    <div>
      <el-button
        icon="el-icon-refresh"
        circle
        @click="handleflush()"></el-button>
    </div>
<!--    <div>-->
<!--      <el-button-->
<!--        icon="el-icon-refresh"-->
<!--        circle-->
<!--        @click="handleflush3()"></el-button>-->
<!--    </div>-->
<!--    <div>-->
<!--      <el-button-->
<!--        icon="el-icon-refresh"-->
<!--        circle-->
<!--        @click="handleflush4()"></el-button>-->
<!--    </div>-->



    <div class="layui-row">
      <div>
        <audio style="width: 80%;" ref="audio" :src="a2" controls autoplay loop></audio>
      </div>
    </div>


  </div>


</template>

<script>
  import axios from 'axios'
  // var a1;
  export default {
    name: 'EchartRank',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        a1: '',
        tableData: [],
        tableData1:[],
        tableData2:[],
        a2:'',
        a3:'',
        url:'',
      }
    },
    created() {
      console.log("======================")
      axios.post("http://127.0.0.1:8200/fancy-music-rank/ridesFindAllMusic").then(res=>{
        console.log(res.data)
        this.a1 = res.data
        this.tableData = res.data
        this.drawLine();
      }),
      axios.post("http://127.0.0.1:8200/fancy-music-rank/ridesrankcollectAllMusic").then(res=>{
        console.log(res.data)
        this.a1 = res.data
        this.tableData1 = res.data
        this.drawLine();
      }),
      axios.post("http://127.0.0.1:8200/fancy-music-rank/redisrankdownloadAllMusic").then(res=>{
        console.log(res.data)
        this.a1 = res.data
        this.tableData2 = res.data
        this.drawLine();
      })

    },
    methods: {
      // drawLine() {
      //   // 基于准备好的dom，初始化echarts实例
      //   let myChart = this.$echarts.init(document.getElementById('myChart'))
      //   // console.log(myChart)
      //   myChart.setOption({
      //     dataset: {
      //       source: [
      //         ['amount', 'product'],
      //         [this.a1[8].score, this.a1[8].value.musicName],
      //         [this.a1[7].score, this.a1[7].value.musicName]
      //         [this.a1[6].score, this.a1[6].value.musicName],
      //         [this.a1[5].score, this.a1[5].value.musicName],
      //         [this.a1[4].score, this.a1[4].value.musicName],
      //         [this.a1[3].score, this.a1[3].value.musicName],
      //         [this.a1[2].score, this.a1[2].value.musicName],
      //         [this.a1[1].score, this.a1[1].value.musicName],
      //         [this.a1[0].score, this.a1[0].value.musicName],
      //
      //       ]
      //     },
      //     grid: {containLabel: true},
      //     xAxis: {name: '点击量'},
      //     yAxis: {type: 'category'},
      //     visualMap: {
      //       orient: 'horizontal',
      //       left: 'center',
      //       min: 10,
      //       max: 100,
      //       text: ['最大值', '最小值'],
      //       // Map the score column to color
      //       dimension: 0,
      //       inRange: {
      //         color: ['#D7DA8B', '#E15457']
      //       }
      //     },
      //     series: [
      //       {
      //         type: 'bar',
      //         encode: {
      //           // Map the "amount" column to X axis.
      //           x: 'amount',
      //           // Map the "product" column to Y axis
      //           y: 'product'
      //         }
      //       }
      //     ]
      //   });
      // },
      handleMusic(index, row) {
        console.log(row.value)
        this.a2 = row.value.musicUrl
        axios.post("http://127.0.0.1:8200/fancy-music-rank/addvisit",row.value).then(res=>{
        })
        this.handleflush1()
      },

      handleflush(){
        axios.get("http://127.0.0.1:8200/fancy-music-rank/rankvisitAllMusic").then(res=>{
          console.log(res.data.set)
          this.a1 = res.data
          this.tableData = res.data
          this.drawLine();
        }),
          axios.post("http://127.0.0.1:8200/fancy-music-rank/rankcollectAllMusic").then(res=>{
            console.log(res.data)
            this.a1 = res.data
            this.tableData1 = res.data
            this.drawLine();
          }),
          axios.post("http://127.0.0.1:8200/fancy-music-rank/rankdownloadAllMusic").then(res=>{
            console.log(res.data)
            this.a1 = res.data
            this.tableData2 = res.data
            this.drawLine();
          })

      },
          handleflush1(){
            axios.post("http://127.0.0.1:8200/fancy-music-rank/ridesFindAllMusic").then(res=>{
              this.a1 = res.data
              this.tableData = res.data
              this.drawLine();
            })
        },


    }
  }
</script>

<style scoped>
  .a4{
    background-color: darkgrey;
    float: left;
  }
  .a5{
    background-color: darkgrey;
    width: 300px;
    height: 500px;
    float: left;
  }
  .a6{
    width: 50px;
    height: 300px;
    float: left;
    }
  .a7{
    width: 30px;
    height: 300px;
    float: left;
  }
  .el-table__header th {
    padding: 0;
    height: 30px;
    line-height: 60px;
  }
  .el-table td{
  padding: 0px 0;
}
  .layui-row{
    width: 100%;
    height: 100px;
    float: left;
    margin-top: 150px;
    margin-left: 100px;

  }
  .a8{
    background-color: #545c64;
    width: 100%;
    height:1030px;
  }
  .a9{
    width: 40%;
    height: 50px;
  }
  .demo-image{
    width: 300px;
    height: 300px;
  }
  .a11{

    width: 80px;
    height: 300px;
    float: left;

  }
  .a1{
    width: 100%;
  }

</style>
